<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品详情页设计</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }
        .container {
            max-width: 414px;
            margin: 20px auto;
            background: white;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }
        .back-button {
            font-size: 18px;
            margin-right: 10px;
        }
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
        }
        .header-action {
            font-size: 16px;
        }
        .content {
            padding-bottom: 70px;
        }
        .work-banner {
            height: 250px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .work-rank {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0,0,0,0.6);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .work-info {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .work-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .work-meta {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        .work-department {
            margin-right: 10px;
        }
        .work-position {
            padding-left: 10px;
            border-left: 1px solid #ddd;
        }
        .work-stats {
            display: flex;
            margin-top: 10px;
        }
        .work-stat {
            display: flex;
            align-items: center;
            margin-right: 15px;
            font-size: 14px;
            color: #666;
        }
        .work-stat-icon {
            margin-right: 5px;
        }
        .section {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .section-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .section-icon {
            margin-right: 5px;
        }
        .work-desc {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }
        .achievement-list {
            margin: 10px 0;
        }
        .achievement-item {
            margin-bottom: 10px;
            font-size: 14px;
            color: #666;
            display: flex;
        }
        .achievement-bullet {
            margin-right: 8px;
        }
        .achievement-content {
            flex: 1;
        }
        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        .gallery-item {
            height: 100px;
            background: #f0f0f0;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
        }
        .comment-list {
            margin-top: 10px;
        }
        .comment-item {
            display: flex;
            margin-bottom: 15px;
        }
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #f0f0f0;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .comment-content {
            flex: 1;
        }
        .comment-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 3px;
        }
        .comment-text {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .comment-time {
            font-size: 12px;
            color: #999;
        }
        .bottom-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 414px;
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            padding: 0 15px;
            box-sizing: border-box;
            border-top: 1px solid #f0f0f0;
        }
        .action-buttons {
            display: flex;
            flex: 1;
        }
        .action-button {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
            margin-right: 20px;
        }
        .action-icon {
            margin-right: 5px;
            font-size: 18px;
        }
        .vote-button {
            background: #333;
            color: white;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
        }
        .voted-button {
            background: #f0f0f0;
            color: #999;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
        }
        
        /* 投票反馈弹窗 */
        .vote-feedback {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        .feedback-card {
            width: 80%;
            max-width: 300px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
        .feedback-header {
            background: #f9f9f9;
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
        }
        .feedback-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }
        .feedback-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .feedback-subtitle {
            font-size: 14px;
            color: #666;
        }
        .feedback-content {
            padding: 20px 15px;
            text-align: center;
        }
        .feedback-message {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .feedback-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .feedback-stat {
            text-align: center;
        }
        .feedback-stat-value {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .feedback-stat-label {
            font-size: 12px;
            color: #999;
        }
        .feedback-buttons {
            display: flex;
        }
        .feedback-button {
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            border-top: 1px solid #f0f0f0;
        }
        .feedback-button.primary {
            background: #333;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="back-button">←</div>
            <div class="header-title">作品详情</div>
            <div class="header-action">⋮</div>
        </div>
        
        <div class="content">
            <div class="work-banner">
                <div style="color: #999; font-size: 14px;">作品封面图</div>
                <div class="work-rank">1</div>
            </div>
            
            <div class="work-info">
                <div class="work-title">张三</div>
                <div class="work-meta">
                    <div class="work-department">市场部</div>
                    <div class="work-position">营销总监</div>
                </div>
                <div class="work-stats">
                    <div class="work-stat">
                        <span class="work-stat-icon">👍</span>
                        <span>256票</span>
                    </div>
                    <div class="work-stat">
                        <span class="work-stat-icon">👁️</span>
                        <span>1024次浏览</span>
                    </div>
                    <div class="work-stat">
                        <span class="work-stat-icon">💬</span>
                        <span>18条评论</span>
                    </div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">📝</span>
                    个人简介
                </div>
                <div class="work-desc">
                    张三，市场部营销总监，2018年加入公司。负责公司整体市场策略规划和执行，带领团队完成多个重大营销项目，为公司业绩增长做出了突出贡献。
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">🏆</span>
                    年度成就
                </div>
                <div class="achievement-list">
                    <div class="achievement-item">
                        <div class="achievement-bullet">•</div>
                        <div class="achievement-content">
                            策划并执行"品牌焕新"营销活动，提升品牌知名度30%，带动销售额增长25%
                        </div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-bullet">•</div>
                        <div class="achievement-content">
                            优化营销渠道，降低获客成本18%，提高转化率22%
                        </div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-bullet">•</div>
                        <div class="achievement-content">
                            建立完善的市场数据分析体系，为产品决策提供有力支持
                        </div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-bullet">•</div>
                        <div class="achievement-content">
                            带领团队获得行业"最佳营销团队"奖项
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">🖼️</span>
                    工作展示
                </div>
                <div class="gallery">
                    <div class="gallery-item">项目图片1</div>
                    <div class="gallery-item">项目图片2</div>
                    <div class="gallery-item">项目图片3</div>
                    <div class="gallery-item">项目图片4</div>
                    <div class="gallery-item">项目图片5</div>
                    <div class="gallery-item">项目图片6</div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <span class="section-icon">💬</span>
                    评论 (18)
                </div>
                <div class="comment-list">
                    <div class="comment-item">
                        <div class="comment-avatar">👤</div>
                        <div class="comment-content">
                            <div class="comment-name">李四</div>
                            <div class="comment-text">
                                张总监的营销策略非常有创意，带领团队取得了很好的成绩！
                            </div>
                            <div class="comment-time">12-05 14:30</div>
                        </div>
                    </div>
                    <div class="comment-item">
                        <div class="comment-avatar">👤</div>
                        <div class="comment-content">
                            <div class="comment-name">王五</div>
                            <div class="comment-text">
                                品牌焕新活动确实做得很成功，支持张总监！
                            </div>
                            <div class="comment-time">12-05 10:15</div>
                        </div>
                    </div>
                    <div class="comment-item">
                        <div class="comment-avatar">👤</div>
                        <div class="comment-content">
                            <div class="comment-name">赵六</div>
                            <div class="comment-text">
                                数据分析体系帮助我们更好地了解客户需求，非常实用！
                            </div>
                            <div class="comment-time">12-04 16:42</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom-bar">
            <div class="action-buttons">
                <div class="action-button">
                    <span class="action-icon">💬</span>
                    评论
                </div>
                <div class="action-button">
                    <span class="action-icon">📤</span>
                    分享
                </div>
            </div>
            <div class="vote-button">投票支持</div>
        </div>
    </div>
    
    <!-- 投票反馈弹窗 -->
    <div class="vote-feedback">
        <div class="feedback-card">
            <div class="feedback-header">
                <div class="feedback-icon">🎉</div>
                <div class="feedback-title">投票成功</div>
                <div class="feedback-subtitle">感谢您的支持</div>
            </div>
            <div class="feedback-content">
                <div class="feedback-message">
                    您已成功为"张三"投票，当前排名第1位
                </div>
                <div class="feedback-stats">
                    <div class="feedback-stat">
                        <div class="feedback-stat-value">257</div>
                        <div class="feedback-stat-label">当前票数</div>
                    </div>
                    <div class="feedback-stat">
                        <div class="feedback-stat-value">4</div>
                        <div class="feedback-stat-label">剩余票数</div>
                    </div>
                </div>
            </div>
            <div class="feedback-buttons">
                <div class="feedback-button">继续浏览</div>
                <div class="feedback-button primary">查看排行</div>
            </div>
        </div>
    </div>
</body>
</html>